<template>
  <div class="infinite-container">
    <div style="padding:0 100px;" class="bgwhite">
     <mu-tabs :value="activeTab" @change="handleTabChange">
      <mu-tab value="tab1" title="我的排班"/>
      <mu-tab value="tab2" title="科室排班"/>
    </mu-tabs>
    </div>

    <div class="bgwhite" >
      <mu-divider />
      <mu-flexbox class="text-center pd10">
        <mu-flexbox-item :class="[activeName === -1 ? 't1' : '']" @click.native="selectSchedule(-1)">
          <i class="iconfont icon-left" />
          上一周
        </mu-flexbox-item>
        <mu-flexbox-item :class="[activeName === 0 ? 't1' : '']" @click.native="selectSchedule(0)">
          本周
        </mu-flexbox-item >
        <mu-flexbox-item :class="[activeName === 1 ? 't1' : '']" @click.native="selectSchedule(1)">
          下一周
          <i class="iconfont icon-small-arrow-right" />
        </mu-flexbox-item>
      </mu-flexbox>
    </div>

    <div v-show="activeTab === 'tab1'" class="mt10 bgwhite">
      <!-- tab1 content -->
      <table class="table table1" v-if="schedule1.length > 0">
        <thead>
          <th>日期</th>
          <th class="f12">上午</th>
          <th class="f12">下午</th>
          <th class="f12">晚上</th>
        </thead>
        <tr v-for="item in schedule1" :key="item.workDate">
          <td>
            <div>{{item.workDate | subs}}</div>
            <div class="f12">{{item.dayOfWeek | week}}</div>
          </td>
          <td :class="[item.statusMorning === '1' ? 'active' : '']">
            <!-- <div class="arrow">专家</div> -->
            <template v-if="item.statusMorning === '1'">
              <span class="t1">就诊</span>
              <div class="f12">{{item.departmentName}}</div>
            </template>
          </td>
          <td :class="[item.statusAfternoon === '1' ? 'active' : '']">
            <template v-if="item.statusAfternoon === '1'">
              <span class="t1">就诊</span>
              <div class="f12">{{item.departmentName}}</div>
            </template>
          </td>
          <td :class="[item.statuNight === '1' ? 'active' : '']">
            <template v-if="item.statuNight === '1'">
              <span class="t1">就诊</span>
              <div class="f12">{{item.departmentName}}</div>
            </template>
          </td>
        </tr>
      </table>
      <empty v-else />
    </div>
    <div v-show="activeTab === 'tab2'" class="mt10 bgwhite">
      <!-- tab2 content -->
      <empty v-if="schedule2.length === 0" />
      <div v-else>
        <div class="pd10 text-center bb1">{{startDate}} ~ {{endDate}}</div>
        <table class="table table2">
            <thead>
            <th class="f12">医生</th>
            <th class="f12">时段</th>
            <th class="f12">一</th>
            <th class="f12">二</th>
            <th class="f12">三</th>
            <th class="f12">四</th>
            <th class="f12">五</th>
            <th class="f12">六</th>
            <th class="f12">日</th>
          </thead>
          <template v-for="item in schedule2">
            <tr :key="item.workDate">
              <td rowspan="2">{{item.doctorName}}</td>
              <td>上午</td>
              <td v-for="(mo, i) in item.morningDays" :key="i">
                <span v-if="mo.statusMorning === '1'">诊</span>
              </td>
            </tr>
            <tr :key="item.workDate">
              <td>下午</td>
              <td v-for="(mo, i) in item.afternoonDays" :key="i">
                <span v-if="mo.statusAfternoon === '1'">诊</span>
              </td>
            </tr>
          </template>
        </table>
      </div>
    </div>


  </div>
</template>

<script>
import {commonAjax, getSignature} from '@/api/api'
import {formatDate} from '@/common/js/util'
import empty from '@/components/empty'
export default {
  components: {empty},
  data () {
    return {
      activeTab: 'tab1',
      schedule1: [],
      schedule2: [],
      activeName: 0,
      startDate: '',
      endDate: '',
      days: [],
      query: {}
    }
  },
  filters: {
    subs (v) {
      if (!v) {
        return ''
      }
      return v.slice(5)
    },
    week (v) {
      if (!v) {
        return ''
      }
      return ['', '周日', '周一', '周二', '周三', '周四', '周五', '周六'][v]
    }
  },
  mounted () {
    this.query = this.$route.query
    sessionStorage.accessToken = decodeURIComponent(this.query.token)
    sessionStorage.sn = this.query.sn
    this.docSchedule(0)
  },
  methods: {
    handleTabChange (tabname) {
      this.activeTab = tabname
      tabname === 'tab1' ? this.docSchedule(0) : this.departmentSchedule(0)
    },
    selectSchedule (n) {
      if (this.activeTab === 'tab1') {
        this.docSchedule(n)
      } else {
        this.departmentSchedule(n)
      }
    },
    docSchedule (v) {
      let query = this.$route.query
      let params = {
        hospitalCode: query.hospitalCode || '4304013103',
        docCode: query.docCode || 'B073',
        weekRange: v
      }
      this.activeName = v
      commonAjax('auth/schedule/docSchedule', getSignature(params)).then(res => {
          // todo
        if (res.data.code == 200 && res.data.data) {
          this.schedule1 = res.data.data
        } else {
          this.schedule1 = []
          this.$store.commit('UPDATE_TOAST', {
            message: res.data.msg || '暂无数据'
          })
        }
      })
    },
    createDays () {
      let temp = []
      for (let i = 0; i < 7; i++) {
        temp.push(this.getWeekDate(i))
      }
      this.days = temp
    },
    getMorningDays (v1) {
      let temp = []
      this.days.forEach(day => {
        if (v1.workDate === day && v1.statusMorning === '1') {
          temp.push(v1)
        } else {
          temp.push({
            workDate: day
          })
        }
      })
      return temp
    },
    getAfternoonDays (v1) {
      let temp = []
      this.days.forEach(day => {
        if (v1.workDate === day && v1.statusAfternoon === '1') {
          temp.push(v1)
        } else {
          temp.push({
            workDate: day
          })
        }
      })
      return temp
    },
    groupByDoctor (data) {
      let temp = []
      let names = []
      data.forEach(v => {
        let index = names.indexOf(v.doctorName)
        if (index === -1) {
          names.push(v.doctorName)
          temp.push({
            doctorName: v.doctorName,
            morningDays: this.getMorningDays(v),
            afternoonDays: this.getAfternoonDays(v)
          })
        } else {
          // temp[index]
        }
      })
      return temp
    },
    departmentSchedule (v) {
      let query = this.$route.query
      let params = {
        hospitalCode: query.hospitalCode || '4304013103',
        docCode: query.docCode || 'B073',
        weekRange: v
      }
      this.activeName = v
      commonAjax('auth/schedule/departmentSchedule', getSignature(params)).then(res => {
          if (res.data.code == 200 && res.data.data) {
          this.startDate = res.data.data[0].workDate
          this.endDate = this.getWeekDate(7)
          this.createDays()
          this.schedule2 = this.groupByDoctor(res.data.data)
        } else {
          this.schedule2 = []
          this.$store.commit('UPDATE_TOAST', {
            message: res.data.msg || '暂无数据'
          })
        }
      })
    },
    getWeekDate (n) {
      let today = new Date()
      if (this.startDate) {
        today = new Date(this.startDate)
      }
      if (typeof n === 'number' && n !== 0) {
        today.setTime(today.getTime() + 24 * 60 * 60 * 1000 * n)
      }
      return formatDate(today, 'yyyy-MM-dd')
    }
  }
}
</script>

<style lang="less" scoped>
@import url('../common/css/vars.less');
.iconfont {
  font-size: 1em;
}
.f12 {
  font-size: 12px;
}
.table {
  border-collapse: collapse;
  text-align: center;
  width: 100%;
  &.table1 {
    td {width: 25%;}
  }
  th{padding: 6px 0;font-weight: normal;}
  td{
    position: relative;
    padding: 10px 0;
    border:1px solid #f5f5f5;
    &.active {
      background: #F2F9FF;
    }
    .arrow {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 12px;
      width: 30px;
      height: 16px;
      line-height: 16px;
      background: #FE9109;
      color: #fff;
      border-bottom-left-radius: 8px;
    }
  }
}
</style>
